<template>
  <div class="likeAlbumList">
    <div class="content" v-if="playList.length != 0">
      <!-- 用户创建的歌单 -->
      <div class="userCreateAlbum">
        <h2 class="one_txt_cut">
          {{ userStoreProfile.nickname }}&nbsp;&nbsp;&nbsp;创建的歌单({{
            userCreateAlbum.length
          }}个)
        </h2>
        <ul>
          <li v-for="item in userCreateAlbum" :key="item.id">
            <div class="img">
              <GlobalImageDeep
                :imgWidth="100"
                :imgHeight="100"
                :url="item.coverImgUrl"
              />
            </div>
            <div class="info">
              <div
                class="info_name one_txt_cut"
                @click="toCategoryDetailsPage(item.id)"
              >
                {{ item.name }}
              </div>
              <div class="info_other one_txt_cut">
                {{ item.trackCount }}首
                <span>播放&nbsp;{{ getCount(item.playCount) }}&nbsp;次</span>
                &nbsp; By &nbsp; {{ item.creator.nickname }}
              </div>
              <div class="info_desc" v-if="item.description">
                {{ item.description }}
              </div>
            </div>
            <i class="iconfont icon-cuowu" @click="delAlbum(item)"></i>
          </li>
        </ul>
      </div>
      <!-- 用户 订阅/收藏  的歌单 -->
      <div class="userSubscribedAlbum">
        <h2 class="one_txt_cut">
          {{ userStoreProfile.nickname }}&nbsp;&nbsp;&nbsp;订阅的歌单({{
            userSubscribedAlbum.length
          }}个)
        </h2>
        <ul>
          <li v-for="item in userSubscribedAlbum" :key="item.id">
            <div class="img">
              <GlobalImageDeep
                :imgWidth="100"
                :imgHeight="100"
                :url="item.coverImgUrl"
              />
            </div>
            <div class="info">
              <div
                class="info_name one_txt_cut"
                @click="toCategoryDetailsPage(item.id)"
              >
                {{ item.name }}
              </div>
              <div class="info_other one_txt_cut">
                {{ item.trackCount }}首
                <span>播放&nbsp;{{ getCount(item.playCount) }}&nbsp;次</span>
                &nbsp; By &nbsp; {{ item.creator.nickname }}
              </div>
              <div class="info_desc two_txt_cut" v-if="item.description">
                {{ item.description }}
              </div>
            </div>
            <i class="iconfont icon-cuowu" @click="delAlbum(item)"></i>
          </li>
        </ul>
      </div>
    </div>
    <el-row v-else type="flex" justify="center">
      <img
        src="../../../../assets/images/loading.3708220b.gif"
        alt=""
        height="200"
        width="200"
      />
    </el-row>
  </div>
</template>

<script>
import { mapState, mapMutations, mapActions } from "vuex";
import { getUserAlbum } from "../../../../api/myMusicApi";
import { getCount } from "../../../../utils/format";
export default {
  name: "likeAlbumList",
  components: {},
  data() {
    return {
      playList: [], // 用户所有的歌单
      userCreateAlbum: [], // 用户创建的歌单
      userSubscribedAlbum: [], // 用户 订阅/收藏 的歌单
      userLikeSongsAlbumId: 0, // 用户 喜欢音乐 歌单 的id
    };
  },
  created() {
    this.getUserAlbumMethod();
  },
  methods: {
    getCount,
    async getUserAlbumMethod() {
      let res = await getUserAlbum(this.userStoreProfile.userId);
      console.log(res);
      if (res.code === 200) {
        this.playList = res.playlist;
        this.userLikeSongsAlbumId = res.playlist[0].id;
        res.playlist?.forEach((item, index) => {
          if (index === 0 || item.subscribed === false) {
            this.userCreateAlbum.push(item);
          } else {
            this.userSubscribedAlbum.push(item);
          }
        });
      }
    },
    delAlbum(item) {
      console.log(item);
      if (item.id == this.userLikeSongsAlbumId) {
        this.$message({
          type: "error",
          message: "此歌单不可删除",
        });

        return;
      }
      this.$confirm(`是否要永久取消收藏    ${item.name} 歌单`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    toCategoryDetailsPage(id) {
      this.$router.push(`/categoryDetails/${id}`);
    },
  },
  computed: {
    ...mapState({
      userStoreProfile: (state) => state.userStore.profile,
      userStoreCookie: (state) => state.userStore.cookie,
      userStoreToken: (state) => state.userStore.token,
      userStoreUserDetail: (state) => state.userStore.userDetail,
    }),
  },
};
</script>

<style lang="less" scoped>
.likeAlbumList {
  .content {
    margin: 20px 0;
    display: flex;
    justify-content: space-between;
    > div {
      width: 590px;
      padding: 20px;
      // border: 1px dashed #eee;
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
      border-radius: 8px;
    }
    h2 {
      font-weight: normal;
      font-size: 24px;
      margin-bottom: 10px;
    }
    ul li {
      position: relative;
      width: 100%;
      display: flex;
      align-items: center;
      margin-bottom: 8px;
      .img {
        /deep/ .el-image img {
          border-radius: 8px;
        }
      }
      .info {
        width: 380px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        height: 100%;
        margin-left: 20px;
        .info_name {
          cursor: pointer;
          font-size: 16px;
          margin-bottom: 5px;
          &:hover {
            color: @globalColor;
          }
        }
        .info_other,
        .info_desc {
          color: #999999;
        }
      }
      &:hover i {
        display: block;
      }
      > i {
        display: none;
        position: absolute;
        right: 0;
        top: 0;
        font-size: 20px;
        cursor: pointer;
        transition: all 0.1s;
        &:hover {
          color: @globalColor;
        }
      }
    }
  }
}
</style>
